<template>
  <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="服务商类型" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="个人"></el-radio>
              <el-radio label="企业"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="代理伙伴名称" prop="dname">
            <el-input v-model="ruleForm.dname"></el-input>
          </el-form-item>
          <el-form-item label="企业名称" prop="qname">
            <el-input v-model="ruleForm.qname"></el-input>
          </el-form-item>
        <!-- 选择时间 start -->
          <el-form-item label="活动时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="ruleForm.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <!-- 选择时间 end -->
          <el-form-item label="企业地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="联系手机" prop="phone">
            <el-input v-model="ruleForm.phone" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
         <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
         </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
       </el-form-item>
        </el-form>
</template>

<script>
import {isvalidPhone} from '../../utils/utils' 
export default {
  props:['ruleForm'],
  data() {
        var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
    return {
      // ruleForm: {
      //   resource: "",
      //   dname: '',
      //   qname: "",
      //   date1: '',
      //   date2: '',
      //   address:'',
      //   username:'',
      //   phone:'',
      //   desc:''
      // },
      rules: {
        resource: [
          { required: true, message: "请选择服务商类型", trigger: "change" },
        ],
        dname: [
          { required: true, message: "请输入代理伙伴名称", trigger: "blur" },
          { min: 3, max: 5, message: "代理伙伴名称的长度在 3 到 5 个字符", trigger: "blur" },
        ],
        qname: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          { min: 3, max: 5, message: "企业名称的长度在 3 到 5 个字符",trigger: "blur" },
        ],
        date1: [
            {  required: true, message: '请选择日期', trigger: 'change' }
          ],
        date2: [
            {  required: true, message: '请选择时间', trigger: 'change' }
          ],
        address: [
            {  required: true, message: '请输入联系地址', trigger: 'blur' }
          ],
        username: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
        phone: [
            //{ required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
          ]
        
      },
    };
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            console.log(this.ruleForm);
            this.$emit('hello',this.ruleForm);

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>